<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
    
</head>
<body>
    <canvas id='canvas'>
        
    </canvas>
</body>
<script type="text/javascript">
    var width = 600, height=600;
        var canvas = document.getElementById('canvas');
        canvas.width = width;
        canvas.height = height;
        var spotArry = [];
        var ctx = canvas.getContext('2d');
        ctx.fillStyle="lightblue";
        ctx.fillRect(0,0,width,height);
        ctx.beginPath();
        
        
        ctx.stroke();
        function spot(x, y, r, color){
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.draw = function(){
                ctx.arc(this.x,this.y,this.r,0,10*Math.PI);
                ctx.fillStyle=this.color;
                ctx.fill();
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.r+10,0,10*Math.PI);
                ctx.strokeStyle=this.color;
                ctx.stroke();
            }
        }
        function start(){
            var x = Number.parseInt(Math.random()*width);
            var y = Number.parseInt(Math.random()*height);
            var arc_r = 10;
            var r = Number.parseInt(Math.random()*255);
            var g = Number.parseInt(Math.random()*255);
            var b = Number.parseInt(Math.random()*255);
            var color = "rgb("+r+","+g+","+b+")";
            spotArry.push(new spot(x, y,arc_r, color));
            spotArry[0].draw();
        }
        start();
        
    </script>
</html>